<template>
	<view class="container">
		<file-upload
			 :imageLength="imageLength"
			 v-on:sendAtts="getAtts"
			 mode="create"
			 :canUploadFile="true"
			 :uploadFileUrl="uploadFileUrl"
			 :showProcess="true"
			 :attachmentList.sync="attachmentList"
			 :attId="attId"
			 @uploadSuccess="uploadSuccess"
			>
		</file-upload>
		<view class="ui-all">
			<view class="ui-list">
				<text>称重重量</text>
				<input type="text" placeholder="请填写最后称重重量(KG)" v-model="weight" 
					placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>{{orderType?'结算积分':'结算金额'}}</text>
				<input type="text" :placeholder="orderType?'请填写最后结算积分（分）':'请填写最后结算金额（元）'" v-model="integral" 
					placeholder-class="place" />
			</view>
		</view>
		<button type="primary" @click="payOrder" style="background-color: #31b977;margin: 15px;">结算订单</button>
	</view>
</template>

<script>
	import {getDistances,dateUtils} from '../../common/utils.js'
	import FileUpload from "@/components/file-upload/file-upload.vue"
	import {mapGetters} from 'vuex'
	export default {
		components:{
			FileUpload
		},
		computed: {
			...mapGetters({
				hasLogin:'hasLogin',
				userInfo: 'userInfo'
		   })
		},
		data() { 
			return {
				imageLength: 5, //限制图片张数
				attachmentList: [],
				atts:[],
				orderType:0,
				garbageType:getApp().globalData.GarbageType,
				orderId:0,
				integral:"",
				weight:""
			}
		},
		onLoad(data) {
			this.orderId=data.id
			this.orderType=data.orderType //1公益赠送0正常
		},
		methods: {
			payOrder(){
				uni.showModal({
					title:'提示',
					content:'共结算'+this.weight+'KG，'+this.integral+(this.orderType?'积分':'元')+'，确认结算订单么？',
					success: (re) => {
						if(re.confirm){
							this.$api('recovery-order','settlementOrder',{_id:this.orderId,checkImage:this.atts,state:4,weight:this.weight,integral:this.integral}).then(res=>{
								uni.showModal({
									title:'成功',
									content:'结算完成',
									success:()=>{
										uni.navigateBack()
									}
								})
							})
						}
					}
				})
			},
			getAtts(value){
			    console.log("atts",value);
				this.atts = value;
			},
			uploadSuccess(result) {
				if(result.statusCode == 200) {
					//上传成功的回调处理
					uni.showToast({
						title: '上传成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>
<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
